<template>
    <div class="admim-nav">
        <div>
            <el-icon>
                <Tickets />
            </el-icon>
            <span>
                数据列表
            </span>
        </div>
        <div>
            <el-button type="primary" @click="addmenu()">添加</el-button>
        </div>
    </div>
    <div v-show="!newData.value ? true : false">
        <el-table :data="tableData" border>
            <el-table-column prop="id" label="编号" width="100" height="40"></el-table-column>
            <el-table-column prop="name" label="类型名称" width="270" height="40"></el-table-column>
            <el-table-column prop="attributeCount" label="属性数量" width="200" height="40"></el-table-column>
            <el-table-column prop="paramCount" label="参数数量" width="200" height="40"></el-table-column>
            <el-table-column label="设置" width="200" height="40">

                <template #default="scope">
                    <el-button link type="primary" @click="attributeList(scope.row, '0')">属性列表</el-button>
                    <el-button link type="primary" @click="attributeList(scope.row, '1')">参数列表</el-button>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="200" height="40">
                <template #default="scope">
                    <el-button link type="primary" @click="addmenu(scope.row)">
                        编辑
                    </el-button>
                    <el-button link type="primary" @click="remover(scope.row)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div v-show="!newData.value ? false : true">
        <el-table border>
            <el-table-column prop="id" label="编号" width="100" height="40"></el-table-column>
            <el-table-column prop="name" label="属性名称" width="270" height="40"></el-table-column>
            <el-table-column prop="attributeCount" label="商品类型" width="130" height="40"></el-table-column>
            <el-table-column prop="paramCount" label="属性是否可换" width="126" height="40"></el-table-column>
            <el-table-column label="属性值的录入方式" width="200" height="40">

                <template #default="scope">
                    <el-button link type="primary" @click="attributeList(scope.row, '0')">属性列表</el-button>
                    <el-button link type="primary" @click="attributeList(scope.row, '1')">参数列表</el-button>
                </template>
            </el-table-column>
            <el-table-column label="操可选值列表" width="120" height="40">
                <template #default="scope">
                    <el-button link type="primary" @click="addmenu(scope.row)">
                        编辑
                    </el-button>
                    <el-button link type="primary" @click="remover(scope.row)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column label="排序" width="120" height="40">

            </el-table-column>
            <el-table-column label="操作" width="120" height="40">

            </el-table-column>

        </el-table>
    </div>
    <el-pagination v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize"
        :page-sizes="[1, 5, 10, 20]" layout="total, sizes, prev, pager, next, jumper"
        :total="paginations ? paginations.total : pagination.total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    <addproductattr :visible="visible" :change="change" @getValue="getValuefn"></addproductattr>
</template>

<script setup lang="ts">
import * as api from '../../request/api'
import useTable from '../../hooks/useTables'
import { ref } from "vue"
import type { Ref } from "vue"
import { ElMessage, ElMessageBox, affixProps } from 'element-plus'
import { useRouter, useRoute, RouterView } from 'vue-router';
import addproductattr from './addproductattr.vue'
const newData: any = ref([])
const paginations: any = ref()
interface add {
    id: number,
    name: string,
    attributeCount: number,
    paramCount: number
}

//弹窗显示
const visible = ref(false)
const change: any = ref({}) as Ref<add>

//分配提示
const getValuefn = (e: any) => {
    // console.log(e)
    visible.value = e
}

// let { tableData, getTableData, pagination } = useTable(api.product.ProductAttribute)
let { tableData, getTableData, pagination } = useTable(api.product.ProductAttribute)
console.log(tableData);
getTableData()
const handleSizeChange = (val: number) => {
    getTableData()
    // console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    getTableData()
    // console.log(`current page: ${val}`)
}
//属性列表
const attributeList = (row: any, type: string) => {
    let { tableData, getTableData, pagination } = useTable(api.product.getattributeList, {
        parentId: row.id,
        type: type
    })
    getTableData()
    newData.value = tableData
    paginations.value = pagination
    console.log(newData);

    return newData
}
//添加
const addmenu = (row?: add) => {
    console.log(1);
    change.value = row
    visible.value = true
}
//删除
const remover = (id: number) => {
    //数据传输
    ElMessageBox.confirm(
        '确定删除嘛',
        '删除提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            await api.product.postrmover(id)
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
            getTableData()
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消成功',
            })
        })

}


</script>

<style lang="scss" scoped>
.admim-nav {
    width: 96%;
    height: 20px;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2);
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 60px;
    margin-bottom: 20px;

    .example-pagination-block {
        margin-top: 10px;
        float: right;
    }
}
</style>